<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>新建工作</title>
	<script src="/lib/jQuery-File-Upload-master/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="/lib/mui/mui/mui.min.js" ></script>
    <script src="/lib/mui/mui/showLoading.js"></script>
	<link href="../../lib/mui/mui/mui.css?20190819.1" rel="stylesheet">

	<script type="text/javascript" charset="UTF-8">
        mui.init();
	</script>
	<style>
		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
			width: 50%;
		}

		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
			font-size: 13px;
		}

		.mui-bar {
			background-color: #0B7CC4;
		}
		/*img{
            border-radius: 50%;
            background-color: red;
        }*/

		.examination {
			height: 40px;
			/*background-color: #C8C7CC;*/
		}

		.examination .left {
			float: left;
			line-height: 40px;
			margin-left: 26px;
			color: #999;
		}

		.examination .right {
			float: right;
			line-height: 40px;
			color: #22be8a;
			margin-right: 13px;
		}

		.mui-table-view:after {
			background-color: #fff;
		}

		.mui-title-bar {
			float: left;
		}

		.mui-title-bar:after {
			content: ' ';
			border-left: 4px solid #ffa96f;
			line-height: 43px;
			margin-left: 10px;
		}

		.mui-table-view.mui-grid-view {
			padding-top: 4px;
			padding-bottom: 14px;
		}

		.mui-table-view:before {
			background-color: #FFFFFF;
		}

		.mui-card-footer,
		.mui-card-header {
			padding: 10px 12px;
		}

		.mui-badge {
			position: absolute;
			top: 0px;
			right: 0px;
		}

		.mui-table-view-cell>.mui-badge,
		.mui-table-view-cell>.mui-btn,
		.mui-table-view-cell>.mui-switch,
		.mui-table-view-cell>a>.mui-badge,
		.mui-table-view-cell>a>.mui-btn,
		.mui-table-view-cell>a>.mui-switch {
			position: absolute;
			top: 17%;
			right: 9px;
			border-radius: 50% 50%;
			z-index: 1;
		}
		img{/*
			width:38.67px;
			height:38.67px;*/
		}
		.mui-media-body{
			width:60px;
			height:15px;
		}
		.block{
			height: 88px;
			width: 100%;
		}
		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
			white-space: initial;
		}
		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
			height: 30px;
			margin-top: 0px;
		}
		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object{
			width:38.67px;
		}
		.header_a{
			height: 15px;
			margin-top: 15px;
		}
		
		.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:after{height:0}
				input[type=search]{
			background-color: #fff;
		}
		.mui-search{
			width: 93%;
			margin: 0 auto;
			/*margin-top: 50px;*/
			height:40px;
		}
		.mui-input-row{
			margin-top: 3px;
			z-index:10;
		}
		/*头部div样式*/
		.top-div-button{
			height:77px;
			width:25%;
			/*padding-top: 12px;*/
			float:left;
			background-color:#fafafa;
			text-align: center;
			cursor:pointer;
		}
		/*头部div点击样式*/
		.top-div-button:active {
			background-color:#fafafa;
		}
		/*头部div点击后的样式*/
		.top-div-button-visited {
			border-bottom:3px;
			border-bottom-color:#1888ff;
			border-bottom-style:solid;
		}	
		/*头部角标样式*/
		.top-div-corner{
			position: absolute;
			right: -2px;
			top: 13px;
			padding: 0 0 0 0px;
			font-size: 12px;
			line-height: 20px;
			color:
			#fff;
			background-color:
			red;
			width: 20px;
			height: 20px;
			border-radius: 100%;
			text-align: center;
		}
		/*头部图片样式*/
		.top-img{
			width:38px;
			padding-top: 12px;
		}
		/*头部标题文本样式*/
		.top-div-text{
			height: 42px;
			font-size:12px;
		}
	</style>
</head>

<body>
<header class="mui-bar mui-bar-nav" style="display:none;">
	<h1 class="mui-title">审批</h1>
</header>

<body>
<div style="width:100%;background-color:#fff;z-index: 999;position: fixed;bottom: 0px;" >

<div class="top-div-button" id="top-div-button-5"  onclick="location.href='/ewx/index?flag=5'">
<div style="width:60px;position:relative;margin:0 auto">
<div id="corner-5" style="display:none" class="top-div-corner">99+</div>
<img class="top-img"  src="/img/assets/gongwen.png" >
</div>
<div class="top-div-text"  >待办公文</div>
</div>
<div class="top-div-button" id="top-div-button-1"  onclick="location.href='/ewx/index?flag=1'">
<div style="width:60px;position:relative;margin:0 auto">
<div id="corner-1" style="display:none" class="top-div-corner">99+</div>
<img class="top-img"  src="/img/assets/daiban0514.png" >
</div>
<div class="top-div-text"  >待办工作</div>
</div>

<div class="top-div-button" id="top-div-button-4" onclick="location.href='/ewx/index?flag=4'">
<img class="top-img"  src="/img/assets/yiban0514.png" >
<div class="top-div-text"  >已办工作</div>
</div>

<div class="top-div-button" style="	border-bottom:3px;border-bottom-color:#1888ff;border-bottom-style:solid;">
<img class="top-img"  src="/img/assets/xinjian0514.png" >
<div class="top-div-text"  >新建工作</div>
</div>
</div>



<i class="mui-title-bar" style="display:none;"></i>
<div class="mui-card-header" style="display:none;"></div>
<div class="mui-card-content" style="display: none;float:left;bottom: 77px;margin-top:77px;">
	<ul class="mui-table-view mui-grid-view" style="display:none">/* 20210420 */
		<li style="position: relative;" class="mui-table-view-cell mui-media mui-col-xs-3">
			<span class="mui-badge mui-badge-danger" style="display: none">2</span>
			<a id="wait" class="mui-table-view-cell" href="javascript:;">
				<img class="mui-media-object" src="/img/workflow/mh5/agency.png">
				<div class="mui-media-body " style="height: 15px;margin-top: 4px">待办工作</div>
			</a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-3" style="display: none">
			<a id="Launch" class="mui-table-view-cell" id="launch" href="javascript:;">
				<img class="mui-media-object" src="/img/workflow/mh5/launch.png">
				<div class="mui-media-body " style="height: 15px;margin-top: 4px">我发起的</div>

			</a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-3" style="display: none">
			<a id="trun" class="mui-table-view-cell" href="javascript:;">
				<img class="mui-media-object" src="/img/workflow/mh5/trun.png">
				<div class="mui-media-body" style="height: 15px;margin-top: 4px">已转交的</div>
			</a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-3">
			<a id="End" class="mui-table-view-cell"  href="javascript:">
				<img class="mui-media-object" src="/img/workflow/mh5/handle.png">
				<div class="mui-media-body" style="height: 15px;margin-top: 4px">办结工作</div>
			</a>
		</li>
	</ul>
	<div class="examination">
		<div class="left">常用审批</div>
		<div class="right" style="display:none">/* 20210420 */
			<!--<a id="add">添加</a>-->
		</div>
	</div>
	<ul class="mui-table-view mui-grid-view" id="Common">
		<li class="mui-table-view-cell mui-media mui-col-xs-3">
			<a class="mui-table-view-cell" href="<?=$v['url']?>" >
				<img class="mui-media-object" src="/img/workflow/mh5/liu.png">
				<div class="mui-media-body">智能表单功能测…</div>
			</a>
		</li>
	</ul>

</div>

</body>
<script type="text/javascript">
    mui.showLoading("正在加载..","div");
    mui.ajax({
        type: 'get',
        url: '/workflow/mobile/flowclassify/flowByAuth',
        dataType:'json',
        async:false,
        success:function(data){
            var li_str1='';
            if(data.datas[0].flowTypes.length>0){
            
            
            //获取名称
            var mc_str=new Array();
			$.ajax({
            url:"/workflow/flowclassify/flowByAuth",
            type:'post',
            dataType:'json',
            async:false,
            success:function(res){
                //要筛选层级
                var first = res.datas
                //有下一级的层级
                var cenJi = []
                //最终层级
                var last = []
                var i=0;
                for (i; i < first.length; i++) {
                    //是否有下一个层级
                    if (first[i].childs.length !=0) {
                        cenJi=cenJi.concat(first[i].childs)
                    }else{
                        last[last.length]=first[i];
                    }
                    //当前层级筛选完进行下一层筛选
                    if(first.length-1==i){
                        //是否还有层级要筛选
                        if(cenJi.length !=0){
                            first=[].concat(cenJi);
                            i=-1;
                            cenJi=[];
                            continue;
                        }else {
                            break;
                        }

                    }
                }
				mc_str=last;
                /*for(var b=0;b<last.length;b++){
        			last[b].sortName
                }*/



            }
        })
				//常用分类
            	var new_arr=new Array();;
            	for(var z=0;z<data.datas[0].flowTypes.length;z++) {
					var items=data.datas[0].flowTypes[z].flowSort;
						//判断元素是否存在于new_arr中，如果不存在则插入到new_arr的最后
						//写？注意！36编号为人事数据列表id，手机端暂不需要
						if($.inArray(items,new_arr)==-1&&items!=36) {
							new_arr.push(items);
					}
				}
				for(var k=0;k<new_arr.length;k++) {
				li_str1+='<li style="width:100%"><div style="width:100%;font-size:14px;background-color:#efeff4">';		
				for(var m=0;m<mc_str.length;m++) {
					if(new_arr[k]==mc_str[m].sortId){
						li_str1+=mc_str[m].sortName;
						
					}
					
				}
				
				li_str1+='</div><ul>';
                for(var z=0;z<data.datas[0].flowTypes.length;z++){
	                if(data.datas[0].flowTypes[z].flowSort==new_arr[k]){
	                	
	                
					var ax=z%2
	                    li_str1 += '<li flowId="'+data.datas[0].flowTypes[z].flowId+'" class="mui-table-view-cell mui-media mui-col-xs-3 dianj">'+
										'<a class="mui-table-view-cell" href="javascript:;" >'+
											/*'<img class="mui-media-object" src="/img/workflow/mh5/liu.png">'+*//* 20210420 */
											'<img class="mui-media-object" src="/img/assets/'+ax+'.png">'+
											'<div class="mui-media-body">'+data.datas[0].flowTypes[z].flowName+'</div>'+
										'</a>'+
								'</li>';
                	}
                }
                li_str1+='</ul></li>';
            }
				//常用审批
                jQuery("#Common").html(li_str1);
            }else{
                jQuery("#Common").html('<li class="mui-table-view-cell">暂无数据</li>');
            };
			
			
		

            var li_str2='';
            if(data.datas.length>0){
                for(var i=1;i<data.datas.length;i++){
                	//子菜单没有的话父级菜单也不显示
				if(data.datas[i].flowTypes.length>0){
					li_str2 +=  '<ul class="mui-table-view" style="background-color: #fff; margin-top: 10px;">'+
					'<li class="mui-table-view-cell mui-collapse">'+
					'<a class="mui-navigate-right" style="background-color: #fff;border-bottom:1px solid #f5f5f5" href="#">'+data.datas[i].sortName+'</a>'+
					'<div class="mui-collapse-content" style="padding:0">'+
					'<ul class="mui-table-view mui-grid-view " style="margin:0;padding:0">'
					
					for(var y=0;y<data.datas[i].flowTypes.length;y++){
							var ay=y%2
	                        li_str2 += '<li flowId="'+data.datas[i].flowTypes[y].flowId+'" style="margin-left:0;padding-left:0;" class=" mui-table-view-cell mui-media mui-col-xs-3 dianj">'+
											'<a class=" mui-table-view-cell" style="margin:0;padding:0;" href="javascript:;">'+
												/* '<img class="mui-media-object" src="/img/workflow/mh5/liu.png">'+ *//* 20210420 */
												'<img class="mui-media-object" src="/img/assets/'+ay+'.png">'+
												'<div class="mui-media-body" style="width:65px;">'+data.datas[i].flowTypes[y].flowName+'</div>'+
											'</a>'+
										'</li>'
	
						}
	                    li_str2 +=  '</ul></div></li></ul>'
                    }
                }

				//alert(JSON.stringify(li_str2))
                jQuery("#Common").after(li_str2);
            }else{
                jQuery("#Common").after('<li class="mui-table-view-cell">暂无数据</li>');
            }
            mui.hideLoading(function(){
                $('.mui-card-content').show();
            });//隐藏laoding
        }
    });
    /*document.getElementById('add').addEventListener('tap', function(e) {
        //打开常用审批页面
        mui.openWindow({
            url: '/workflow/work/workflowAddh5',
            id: '/workflow/work/workflowAddh5'
        });

    });*/
    document.getElementById('wait').addEventListener('tap', function(e) {
        mui.openWindow({
            url: '/workflow/work/workflowLaunchh5?flag=1',
            id: '/workflow/work/workflowLaunchh5'
        });

    });
    document.getElementById('Launch').addEventListener('tap', function(e) {
//        mui.openWindow({
//            url: '/workflow/work/workflowLaunchh5?flag=2',
//            id: '/workflow/work/workflowLaunchh5'
//        });
        alert("正在开发中！")
    });
    document.getElementById('trun').addEventListener('tap', function(e) {
       alert("正在开发中！")
    });
    document.getElementById('End').addEventListener('tap', function(e) {
        mui.openWindow({
            url: '/workflow/work/workflowLaunchh5?flag=4',
            id: '/workflow/work/workflowLaunchh5'
        });

    });
    $(document).on('click','.dianj',function(){
        var flowId=$(this).attr('flowId')
		$.ajax({
			url:'/workflow/work/workfastAdd',
			type:'get',
			dataType:'json',
			data:{
				flowId:flowId,
				prcsId : 1,
				flowStep : 1,
				runId:'',
				preView:0
			},
			success:function(res){
				if(res.flag==true){
				    var runId = res.object.flowRun.runId
                    mui.openWindow({
                        url: '/workflow/work/workformh5?opflag=1&flowId='+flowId+'&type=EWC&flowStep=1&prcsId=1&runId='+runId,
                    });

				}
			}
		});
	})
	cornerGet();
	/*获取角标内文本*/
	function cornerGet(){

		/*公文*/
		var document_url = "/document/selWillDocSendOrReceive?useFlag=true";
		/*工作*/
		var work_url = "/workflow/work/selectWork";

		
		    $.ajax({
            url: document_url,
            type: 'get',
            data:{
                page: 1,
                pageSize:0,
                useFlag:true,
				title:''
            },
            dataType:'json',
            success:function(res){
				
				if(res.total>0){
					$('#corner-5').css('display','');
				}
				if(res.total<99){
					$('#corner-5').text(res.total);
				}
        
            }
        });
		$.ajax({
            url: work_url,
            type: 'get',
            data:{
                page: 1,
                pageSize:1,
                useFlag:true,
				title:''
            },
            dataType:'json',
            success:function(res){
				
				if(res.totleNum>0){
					$('#corner-1').css('display','');
				}
				if(res.totleNum<99){
					$('#corner-1').text(res.totleNum);
				}
        
            }
        });
	}
</script>

</html>